<template>
  <div class="event_details">
    
    <div class="head_first">
      <div class="pictrue">
        <img src="~src/images/details_big.png" alt="">
      </div>

      <div class="title">
        <h2>点击领取参观入场券：2017北京全球INS大会主体分享活动2017北京全球INS大会主体分享活动北京全球INS大会主体分享活动</h2>
        <div class="participation">
          <div>
            <span class="iconfont icon-Artboard"></span> 浏览1000次</div>
          <div>
            <span class="iconfont icon-fenxiang"></span> 分享1000次</div>
          <div>
            <span class="iconfont icon-baoming"></span>已报名500次</div>
        </div>
      </div>
    </div>
    <div class="carousel">

      <el-carousel :interval="4000" type="card" height="180px" indicator-position="none" arrow="never">
        <el-carousel-item v-for="item in carouselData.data">
          <!-- 地址 -->
          <div class="nini" v-on:click="handleClick(item.sign)" v-if="item.sign==='site'">
            <div>
              <div class="ico">
                <span class="iconfont icon-didian"></span>
              </div>
              <p class="subtitle">{{item.title}}</p>
            </div>
            <p class="content">{{item.content}}</p>
            <div class="examine">点击查看地图</div>
          </div>
          <!-- 奖励 -->
          <div class="nini" v-on:click="handleClick(item.sign)" v-else-if="item.sign==='gif'">
            <div>
              <div class="ico">
                <span class="iconfont icon-jiangpinduihuan"></span>
              </div>
              <p class="subtitle">{{item.title}}</p>
            </div>
            <p class="content">{{item.content}}</p>
            <div class="examine">点击查看地图</div>
          </div>
          <!-- 时间 -->
          <div class="nini" v-on:click="handleClick(item.sign)" v-else-if="item.sign==='time'">
            <div>
              <div class="ico">
                <span class="iconfont icon-shijian"></span>
              </div>
              <p class="subtitle">{{item.title}}</p>
            </div>
            <p class="content">{{item.content}}</p>
            <div class="examine">点击查看地图</div>
          </div>

        </el-carousel-item>
      </el-carousel>

    </div>

    <div class="">
      <div></div>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <h2>
        <div class="right">评论(5)</div>

        <div class="left">
          <span class="iconfont icon-pinglun"> </span>
          评论
        </div>
      </h2>
      <div class="review">
        <div class="users">
          <div class="head">
            <img src="~src/images/aimer.jpg" alt="">
          </div>
          <div class="content">
            <p class="user_name">Bo那家</p>
            <div class="inner">
              <div class="word">这样的活动看起来很有意思哦，想参加去现场见明星，还可以有奖品拿，真的不错，希望可以多组织类似的活动让我们参加~~~</div>
              <p class="say_time">2017年08月21日 10:30:26</p>
            </div>
          </div>
        </div>
        <div class="users">
          <div class="head">
            <img src="~src/images/aimer.jpg" alt="">
          </div>
          <div class="content">
            <p class="user_name">Bo那家</p>
            <div class="inner">
              <div class="word">这样的活动看起来很有意思哦，想参加去现场见明星，还可以有奖品拿，真的不错，希望可以多组织类似的活动让我们参加~~~</div>
              <p class="say_time">2017年08月21日 10:30:26</p>
              <div class="reply">
                <div class="exclusive">
                  <div>
                    <span>Bo那家 </span>回复
                    <span>@溱为all</span> 这样的活动看起来很有意思，想参加的话如何报名啊！！！！</div>
                </div>
                <div class="exclusive">
                  <div>
                    <span>董小姐:</span> 我也想参加啊</div>
                </div>
                <div class="exclusive">
                  <div>
                    <span class="mark">展商</span>
                    <span>天际国际：</span>
                     谢谢大家的支持，希望各位都 能中奖，我们会越办越好的。</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="check_more">查看更多</div>
      </div>
    </div>

    
 <div class="apply_list">
        <div class="headline">已报名(100)</div>
        <div class="content">
         <ul class="list">
            <li class="users_portrait" v-for="list in lists">
              <img src="~src/images/aimer.jpg" alt="">
            </li> 
          </ul>            
         </div>
      </div>


  <div>
      
      </div>

    <mt-popup v-model="site" popup-transition="popup-fade">
      <div class="choice">
        <div class="bb">开始报名</div>
      </div>

    
    </mt-popup>
    <mt-popup v-model="gif" popup-transition="popup-fade">
      <div class="choice">
        <div class="caption">活动奖励</div>
        <ul>
          <li>1､前10名报名简历抱枕1个</li>
          <li>2､前5名报名奖励保温杯1个 </li>
          <li>3､前3名报名奖励罗技鼠标1个 </li>
        </ul>
      </div>
    </mt-popup>

  </div>
</template>
<script>
import Vue from 'vue'
import { Carousel, Scrollbar, CarouselItem } from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import { event_details } from 'src/servise/getData';
Vue.use(Carousel)
Vue.use(Scrollbar)
Vue.use(CarouselItem)

export default {
  data() {
    return {
      site: false,
      gif: false,
      items: "",
      newdata: '',
      carouselData: {
        data: [
          { title: '活动时间', content: '广州广交会展馆 A区2.1馆福特展台', sign: 'time' },
          { title: '活动地点', content: '广州广交会展馆 A区2.1馆福特展台', sign: 'site' },
          { title: '活动奖励', content: '广州广交会展馆 A区2.1馆福特展台', sign: 'gif' }
        ]
      },
      lists:[1,2,3,4,5,6,7,8,9,10]
    }
  },

  created() {
    console.log(this.carouselData)
  },


  methods: {
    handleClick: function(item) {
      if (item == 'site') {
        this.site = true
      } else if (item == 'gif') {
        this.gif = true
      }

    }    //v-on的方法里面可以传入  v-for 里面的item的值 
  }
}
</script>
<style scoped lang="stylus">
 .head_first
  background-color #ffffff
  padding-bottom 8px
 @import './icon/iconfont.css';
     .pictrue
      height 200px
      img 
        width 100%
        height 100%
    .title
      padding 0 15px
      background-color #ffffff
      margin-top 9px
      h2  
        font-size 17px
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
        font-weight bold
        line-height: 22px;
      .participation
        display flex
        div
          font-size 12px
          flex 1
          display flex
          
          align-items center
          color #999999
          margin-top 6px
        div:nth-child(1)
          padding-left 6px
        div:nth-child(2) 
          font-size 12px
          flex 1
          display flex
          justify-content center
          align-items center
          color #999999
          margin-top 5px
        div:nth-child(3)
          justify-content flex-end
          padding-right 12px
        .iconfont
          font-size 11px
          margin-right 3px
          padding-top 2px

     .carousel{
      padding 10px 5px
      background-color: #ffffff;
      margin-top 7px
     
    }
   
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
     
   
    .el-carousel__item:nth-child(1) 
      background url('~src/images/greenBack.png')
      background-size 100% 100%
      
    
    .el-carousel__item:nth-child(2) 
     background url('~src/images/oringeBack.png')
     background-size 100% 100%
    .el-carousel__item:nth-child(3) 
      background url('~src/images/blueBack.png')
      background-size 100% 100%
    .el-carousel__mask
      position relative
    .nini
      padding 0 20px
     
      .ico  
        display flex
        justify-content center
        align-items center
        padding-top 10px
        .iconfont
          color #ffffff
          font-size 30px
      .subtitle 
        font-size 17px
        text-align center
        color #ffffff
        margin-top 6px
        
      .content
        font-size 15px
        color #ffffff
        overflow hidden
        text-overflow ellipsis     
        display  -webkit-box
        -webkit-box-orient vertical
        -webkit-line-clamp 2
        margin-top 5px
        padding-left 2px
      .examine
        color #ffffff
        font-size 14px
        position absolute
        bottom 15px
        width 100%
        transform translateX(-20px)
        text-align center
    // 评论
   .mint-popup   
      width 90%
      border-radius 6px
      height 30%
      font-size 14px
      padding 10px 15px
      .caption
         font-size 14px
      ul
        margin-top 5px
        li
          font-size 14px
          line-height 22px
          // 评论start
  .comment
  
    background-color #ffffff
    margin-top 7px
    h2  
      font-size 15px
      height 40px
      display flex
      align-items center
      border-bottom 1px solid #E5E5E5
      padding 0 12px
      .right
        width 70px
      .left
        flex 1
        display flex
        justify-content flex-end
        // 上面的图片和文字直接用文字来合并
    .review
       .users
          display flex
          margin-top 6px
          border-bottom 1px solid #E5E5E5
          padding 0 12px
          .head   
            margin-top 4px
            width 44px 
            height 44px
            img 
              width 100%
              height 100%
          .content    
            flex 1
            padding-left 6px
            padding-bottom: 8px;
            .user_name
              font-size 14px
              color #2A96F5
            .inner
              .word
                font-size 14px
                line-height 20px
                margin-top 2px
              .say_time
                font-size 12px
                margin-top 6px
                color #999999
              .reply
                margin-top 10px
                background-color #F9F9F9
                
                
                .exclusive:last-child
                  border none
                .exclusive
                  line-height 24px
                  padding-top 4px
                  padding-left 4px
                  border-bottom 1px solid #E5E5E5  
                  div 
                    font-size 13px
                    color #999999
                  
                    span 
                      color #2B98F1
                      font-size 13px
                    .mark
                      background-color #2B98F1
                      color #ffffff
                      padding 0px 2px
                      padding-top 2px
                      border-radius 3px
        .check_more
          text-align center
          color #EF5B49  
          font-size 14px
          line-height 38px
          height 35px
      
.apply_list
  margin-top 8px
  background-color #ffffff
  
  .headline
    font-size 15px
    padding-left 12px
    line-height 40px
    border-bottom 1px solid #E5E5E5
  .content
    overflow scroll
    padding 10px 10px
    .list
      width:100%;
      display: inline;
      white-space: nowrap;
      overflow-x:scroll;
      float:left;
      overflow-y:hidden
      height 54px

      .users_portrait
        margin-right 4px
        height 54px
        width 54px
        display:inline-block;

        img
          width 100%
          height 100%

</style>

